/*
 * @Author: xiaosihan 
 * @Date: 2024-08-06 11:14:24 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-08-06 22:30:00
 */


import { Button, Input, message, Modal, Switch } from "antd";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import styles from "./shareModal.module.less";
import shareModalStore from "./shareModalStore";

interface Iprops {
    modelId: string;
}

// 分享链接
export default function ShareModal(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [messageApi, contextHolder] = message.useMessage();
    const [show, setShow] = useState(shareModalStore.show);
    const [shareToken, setShareToken] = useState(shareModalStore.shareToken);
    const [openShare, setOpenShare] = useState(shareModalStore.openShare);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setShow(shareModalStore.show);
        setShareToken(shareModalStore.shareToken);
        setOpenShare(shareModalStore.openShare);
    }), []);

    // 分享链接
    const share_link = async () => {
        const shareLink = `${origin}/#/partCollaborate/${shareToken}`;
        navigator.clipboard.writeText(shareLink);
        messageApi.success("分享链接已复制到剪贴板!");
    }

    return (
        <Modal
            width={600}
            open={show}
            onCancel={() => {
                shareModalStore.setShow(false);
            }}
            maskClosable={false}
            centered={true}
            footer={false}
            title="邀请成员"
            className={styles.ant_model}
        >
            {contextHolder}
            <div className={styles.shareModal} >
                <div className={styles.lable} >邀请链接</div>
                <div className={styles.input} >
                    <Input value={shareToken ? `${origin}/#/partCollaborate/${shareToken}` : "暂未开启"} readOnly />
                    <br />
                    <br />
                    <Switch
                        size="small"
                        value={openShare}
                        onChange={v => {
                            if (v) {
                                shareModalStore.addShare(props.modelId);
                            } else {
                                shareModalStore.closeShare(props.modelId);
                            }
                        }}
                    />&nbsp;&nbsp;协作链接开启
                </div>
                <div className={styles.btn} >
                    <Button type="primary" onClick={() => share_link()} disabled={!shareToken} >复制链接</Button>
                </div>
            </div>
        </Modal>
    );

}